<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>SearchBox - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - SearchBox</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>SearchBox</h2>
            <div class="intro">
                <p>normal模式的SearchBox：回车或点击搜索按钮时触发搜索</p>
            </div>
            <div class="example ui-demo-light-stage">
                <h3>Button Left</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-id="normal-search" data-ui-width="200"></div>
                </div>
                <h3>Button Right</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-button-position="right" data-ui-width="200"></div>
                </div>
                <h3>NO Button</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-button-position="" data-ui-width="200"></div>
                </div>
                <h3>Button Variants</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-button-position="right" data-ui-button-variants="bordered icon" data-ui-width="200"></div>
                </div>
                <h3>Clear Border</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-variants="clear-border hide-searched-button" data-ui-button-position="left" data-ui-button-variants="bordered icon" data-ui-width="200"></div>
                </div>
                <h3>有文本时隐藏搜索按钮</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-variants="hide-searched-button" data-ui-button-position="right" data-ui-button-variants="bordered icon" data-ui-width="200"></div>
                </div>
            </div>
            <h2>即时搜索模式</h2>
            <div class="intro">
                <p>instant模式的SearchBox：搜索框内容变化时触发搜索</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="SearchBox" data-ui-id="instant-search" data-ui-search-mode="instant"></div>
            </div>
            <h2>状态</h2>
            <div class="intro">
                <p>disabled状态的SearchBox</p>
            </div>
            <div class="example ui-demo-light-stage">
                <h3>Disabled</h3>
                <div class="row">
                    <div data-ui-type="SearchBox" data-ui-disabled="true"></div>
                </div>
                <h3>Read Only</h3>
                <div data-ui-type="SearchBox" data-ui-text="text" data-ui-search-mode="instant" data-ui-read-only="true"></div>
            </div>
            <h2>Placeholder</h2>
            <div class="intro">
                <p>placeholder</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="SearchBox" data-ui-placeholder="Input your search..."></div>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="SearchBox" data-ui-search-mode="instant" data-ui-placeholder="小浣熊干脆面"></div>
            </div>
            <h2>缺省值</h2>
            <div class="intro">
                <p>带默认搜索关键词</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="SearchBox" data-ui-text="世界上最长的河流"></div>
            </div>
            <h2>Block</h2>
            <div class="intro">
                <p>不设置宽度即为Block模式</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="SearchBox" data-ui-text="Full Width"></div>
            </div>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'esui/SearchBox',
            'esui/Tab',
            'demo'
        ],
        function (ui) {
            ui.init();
            var normalSearch = ui.get('normal-search');
            normalSearch.on('search', function (e) {
                // console.log(e.target.getValue());
            });
            var instantSearch = ui.get('instant-search');
            instantSearch.on('search', function (e) {
                // console.log(e.target.getValue());
            });
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
